Welcome to HTML ToolBox. This month we will begin looking at tables and their uses. Tables can be found in nearly every well-designed website on the Internet. For example, check out both http://www.microsoft.com/ and http://www.apple.com/ . Both pages are excellent examples of how tables can be used to create the perfect layout for a website.
 
HTML Tables
The first time I came in contact with tables was when I looked at the HTML source for http://www.shareware.com/ . I was intrigued by the "toolbar" which appeared at the left edge of the page. What really grabbed my attention was the fact that the page did not use frames to separate the links in the toolbar from the contents of the page. I quickly chose to view the source for the page, and what I found was an HTML tag that would change the face of web page design for me. The tag was <TABLE>.
 
Tables, Tables, Everywhere!
The average computer user comes in contact with tables every day of his or her life. Take, for instance, the Finder. When you set a window to list its contents by name, you get something that looks like this:
 
One row of the table represents one "item." Each column of the table represents a property of the items in the table. In the file listing above, the rows represent a file, and the columns hold the name, modification date, size, and label associated with each file.
Since we've seen the Finder's file listing as an example of the application of tables, we will attempt to create an HTML table which mirrors the general appearance and function of the Finder file list.
The TABLE tag defines the general structure of your table. The properties you specify within the TABLE tag apply to the entire table, unless the property is overridden by an individual row or cell. Thus, defining a table using the HTML code
<TABLE BORDER="1">
<TR>
<TD>
Text
</TD>
<TD>
in
</TD>
<TD>
Table
</TD>
</TR>
<TR>
<TD>
Format
</TD>
</TR>
</TABLE>
produces a table which looks like this:
 
The browser sizes the table horizontally to the width of the widest row and vertically to the height of the highest column. We'll get to the <TR> and <TD> tags momentarily. You've already seen the use of the BORDER parameter in the <TABLE> specification; a list of the most commonly used parameters in the <TABLE> specification follows. By default, the table is transparent so that the page background — be it a picture or a solid color — shows through.
CELLPADDING Pads the inside of cells with num pixels on each side.
CELLSPACING Pads the outside of cells with num pixels on each side.
WIDTH Force the table to a static width of num pixels.
HEIGHT Force the table to a static height of num pixels.
BORDER Each cell has a stylized border placed around it. The thickness
of the border is equal to num pixels.
BGCOLOR Each cell within the table defaults to color as its background
color.
Once you've defined the general format for the table, you're ready to begin adding the individual table cells.
Between the table definition and the end of the table (</TABLE>) you add row definitions using the TR tag. All objects are by default vertically centered and the row is as wide as the table.
VALIGN Force the objects to be aligned vertically to the top, middle, or
bottom of the row. Default behavior is to align to the middle.
ALIGN This parameter specifies the default horizontal justification of
all cells in this row.
BGCOLOR All cells in the row lose their table-default color and are filled
with the specified color.
Keep in mind that using a BGCOLOR parameter in the <TR> tag only affects the row you're defining; the rest of the rows in the table will still be either transparent or have the color you specified in the <TABLE> tag.
The <TD> tag is used to specify the contents of one cell within a row. All of the parameters have the same meanings as were specified previously, except for the fact that they now apply only to the particular cell being defined by the <TD> tag.
 
Bringing it All Together
Consider the following HTML code:
<TABLE BORDER="1">
<TR>
<TD>
Row 1, Column 1
</TD>
<TD>
Row 1, Column 2
</TD>
<TD>
Row 1, Column 3
</TD>
</TR>
<TR>
<TD>
Row 2, Column 1
</TD>
<TD>
Row 2, Column 2
</TD>
</TR>
</TABLE>
This is a very general starting point for creating a table. You can see that the definition begins with the <TABLE> tag. Next, the <TR> tag specifies that a row follows. Finally, there are three columns created using the <TD> tag. Follow the flow of the tags in the above snippet of code. The use of tags and their corresponding end-tags is much like a stack of papers — papers are added and removed from the top of the stack. Always be certain that your tags balance properly. If you successfully typed in the code above, your table should look something like this:
 
Did it work for you? Wonderful! You've taken your first step to creating beautiful page layouts in HTML. The next step in your journey is to begin adding a little color to the table.
 
Spice it up with Color!
Let's admit it, color always adds impact to any computer document, whether it be a spreadsheet or an HTML document. The key is to come up with colors that work well together. Take the following table, for instance:
 
BGCOLOR= #FF0000 #FFFF00 #0000FF
This table illustrates a poor choice of colors. Not only are the colors too bright (well, my retinas are burning a little at the moment, anyway), but they do not compliment each other. Typically, shades of grey are used in graphical displays because they've been found to be pleasing and easy on the eyes (just look at the Mac OS... greyscale coloration is everywhere!) So instead, we could set up the same table with grey:
 
BGCOLOR= #BBBBBB #DDDDDD #DDDDDD
Thus, we have a coloration scheme which not only is pleasing (and painless) to the eye, but adds a little something extra to the table. More often than not, it's best to stick to using changes in the shade of a single color within a table. For example, if you're Irish and decide to create a page which reflects your heritage, you may want to substitute a nice emerald green for the grey:
 
BGCOLOR= #009000 #00D000 #00D000
This color scheme is a pleasing mixture of two shades of green:
<TABLE BORDER="1">
<TR>
<TD BGCOLOR="#009000">
Row 1, Column 1
</TD>
<TD BGCOLOR="#00D000">
Row 1, Column 2
</TD>
<TD BGCOLOR="#00D000">
Row 1, Column 3
</TD>
</TR>
</TABLE>
 
Looking Ahead
That's it. You now have the basic tools you need to create tables within your HTML documents. Next month we will begin construction of a page which will contain a list of files in tabular form. We will attempt to mimic the look of the Mac OS 8 Finder list view by utilizing our knowledge of color in HTML tables. Don't forget a hardhat!
 
Code Exercise
Create a table which displays a 16 x 16 pixel image (same size as small icons in the Finder) with a program name, file size, creation date, and type of file to the right of the image. Hint: You need to create a table with four columns — one for the graphic and file name, one for creation date, one for the file size, and one for the file type:
 
For an extra challenge, add the small triangle which appears to the left of a folder. The code in the next section demonstrates one possibility... don't peek before you try it, though!
